<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: First Physics</h1>


               <script id='init' type='text/x-cindyscript'>
               pts=allmasses()--[K,L,J];
pts=select(pts,(#.size)<9);

      sizes=apply(pts,random()*.6+.5);
      colors=apply(pts,random());

        </script>

<script id='csmove' type='text/x-cindyscript'>

          x=S.x;
          if(x<S1.x,x=S1.x);
          if(x>S2.x,x=S2.x);
          S.xy=(x,S1.y);

          x=R.x;
          if(x<R1.x,x=R1.x);
          if(x>R2.x,x=R2.x);
          R.xy=(x,R1.y);

          x=T.x;
          if(x<T1.x,x=T1.x);
          if(x>T2.x,x=T2.x);
          T.xy=(x,T1.y);

others=|S,S1|/|S1,S2|;
dirothers=|R,R1|/|R1,R2|;
//anz=round(|T,T1|/|T1,T2|)*14;
anz=4;


pts=allmasses();
pts=select(pts,(#.size)<9);

n=10;
s=sum(pts,#.xy);
forall(pts,p,
  sorted=sort(pts,abs(p.xy-#.xy));
  pmid=sum(2..(n+1),(sorted_#).xy)/(n-1);
  vmid=sum(2..(n+1),(sorted_#).v)/(n-1);
  vd=(pmid-p.xy);
  middir=((0,0)-p.xy);

  v=p.v+vd*.1*others +vmid*.1*dirothers+0.01*middir;

//  p.color=hue(abs(v)/6);

  if(abs(v)>2,v=2*v/abs(v));
  p.v=v;
);

nn=length(pts);
forall(1..nn,p=pts_#;
ang=arctan2(p.vx,-p.vy);
//drawimage(p,"fishr",angle->ang,scale->sizes_#*.3,alpha->colors_#);
//drawimage(p,"fishb",angle->ang,scale->sizes_#*.3,alpha->1-colors_#);
//draw(p,p-p.v,color->(0,0,0));
//fillcircle(p,.3,color->hue(|p.v|*.2));
drawcircle(p,.3,color->(0,0,0));
);
//X.xy=[4,3];
//Y.xy=[-5,4];
//Z.xy=[5,-4];
K.v=(0,0);
J.v=(0,0);
L.v=(0,0);



        </script>


        <div  id="CSCanvas" style="width:850px; height:500px; border:2px solid #000000"></div>


        <script type="text/javascript">
            nn=40;
            b=10;
            var gslp=[
                      {name:"B", type:"Free", pos:[-b,b],color:[0,0,0],size:3,pinned:true},
                      {name:"C", type:"Free", pos:[-b,-b],color:[0,0,0],size:3,pinned:true},
                      {name:"D", type:"Free", pos:[b,-b],color:[0,0,0],size:3,pinned:true},
                      {name:"E", type:"Free", pos:[b,b],color:[0,0,0],size:3,pinned:true},
                      {name:"K", type:"Free", pos:[-6,-2],color:[.7,.7,1],size:13},
                      {name:"J", type:"Free", pos:[4,3],color:[.7,.7,1],size:13},
                      {name:"L", type:"Free", pos:[-2,7],color:[.7,.7,1],size:13},



                      {name:"S1", type:"Free", pos:[12,6],color:[0,0,0],pinned:true,size:2},
    {name:"S2", type:"Free", pos:[20,6],color:[0,0,0],pinned:true,size:2},
    {name:"S", type:"Free", pos:[15.5,6],color:[1,0.5,0.5],pinned:false,size:4},
    {name:"l", type:"Segment", args:["S1","S2"],color:[0,0,0],pinned:false,size:2},
   {name:"R1", type:"Free", pos:[12,4],color:[0,0,0],pinned:true,size:2},
    {name:"R2", type:"Free", pos:[20,4],color:[0,0,0],pinned:true,size:2},
    {name:"R", type:"Free", pos:[14,4],color:[1,1,1],pinned:false,size:4},
    {name:"m", type:"Segment", args:["R1","R2"],color:[0,0,0],pinned:false,size:2},
   {name:"T1", type:"Free", pos:[12,0],color:[0,0,0],pinned:true,size:2},
    {name:"T2", type:"Free", pos:[20,0],color:[0,0,0],pinned:true,size:2},
    {name:"T", type:"Free", pos:[15.5,0],color:[0.5,0.5,1],pinned:false,size:4},
    {name:"o", type:"Segment", args:["T1","T2"],color:[0,0,0],pinned:false,size:2},

                      {name:"a", type:"Segment", args:["B","C"],color:[0,0,0],size:1 },
                      {name:"b", type:"Segment", args:["C","D"],color:[0,0,0],size:1 },
                      {name:"c", type:"Segment", args:["D","E"],color:[0,0,0],size:1 },
                      {name:"d", type:"Segment", args:["E","B"],color:[0,0,0],size:1 }



                    ];

    for(var i=0;i<nn;i++){
    gslp.push(
              {name:"A"+i, type:"Free",
              pos:[(Math.random()-.5)*14,(Math.random()-.5)*14],
              color:[1,.5,.5],size:.1}
              )

};
            var physics=[
                       {behavior:{type:"Environment",gravity:0,
                       accuracy:10,deltat:0.1,
                       balls:false,charges:true,friction:0}},

                       {name:"a", behavior:{type:"Bouncer"}},
                       {name:"b", behavior:{type:"Bouncer"}},
                       {name:"c", behavior:{type:"Bouncer"}},
                       {name:"d", behavior:{type:"Bouncer"}},
                       {name:"K", behavior:{type:"Mass",charge:1,fixed:true}},
                       {name:"L", behavior:{type:"Mass",charge:1,fixed:true}},
                       {name:"J", behavior:{type:"Mass",charge:1,fixed:true}},
                       ];


for(var i=0;i<nn;i++){
    physics.push(
              {name:"A"+i, behavior:{
              type:"Mass",
              vx:Math.random()-.5,
              vy:Math.random()-.5,
              charge:1},
              }
              )

};
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics,
                        images:{fishr:"fish/fishr.png",fishb:"fish/fishb.png"}

                        }
                        );

        </script>

        <button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
        <button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
        <button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>

	</body>
</html>
